<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"
    />
    <style>
      html,
      body {
        margin: 0;
      }
      .el-header img {
        vertical-align: middle;
      }
      .el-header a {
        color: #666;
        text-decoration: none;
      }
      .el-table .el-table__cell {
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header height="150px">
          <div style="width: 1200px; margin: 0 auto">
            <img src="imgs/logo.png" style="width: 300px" alt="" />
            <a href="javascript:void(0)">首页</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">热点资讯</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">商家入驻</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">社会招聘</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">校园招聘</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">帮助</a>
          </div>
          <div style="background-color: #0aa1ed">
            <el-menu
              style="width: 1200px; margin: 0 auto"
              mode="horizontal"
              background-color="#0aa1ed"
              text-color="#fff"
              active-text-color="#D4F2E7"
              @select="handleSelect"
            >
              <el-menu-item index="1">精彩活动</el-menu-item>
              <el-menu-item index="2">精品女装</el-menu-item>
              <el-menu-item index="3">品牌男装</el-menu-item>
              <el-menu-item index="4">母婴产品</el-menu-item>
              <el-menu-item index="5">数码科技</el-menu-item>
              <div style="float: right; position: relative; top: 10px">
                <el-input type="text" placeholder="请输入搜索内容">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </el-menu>
          </div>
        </el-header>
        <el-main style="width: 1200px; margin: 0 auto">
          <el-row gutter="20">
            <el-col span="12">
              <el-crad>
                <img src="imgs/a.jpg" width="100%" alt="" />
              </el-crad>
            </el-col>
            <el-col span="12">
              <p style="font-size: 25px">
                森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古
              </p>
              <el-divider></el-divider>
              <p style="font-size: 15px; color: #666">销量:432 浏览量:123</p>
              <p style="font-size: 25px; font-weight: bold">
                ￥128<span style="font-size: 15px; color: #666">
                  原价:<s>998</s>
                </span>
              </p>
              <el-row gutter="20" style="text-align: center">
                <el-col span="8">
                  <el-card>
                    <img src="imgs/ewm.jpg" width="100%" alt="" />
                    <p>扫描关注公众号</p>
                  </el-card>
                </el-col>
                <el-col span="8">
                  <el-card>
                    <img src="imgs/ewm.jpg" width="100%" alt="" />
                    <p>扫描购买商品</p>
                  </el-card>
                </el-col>
                <el-col span="8">
                  <el-card>
                    <img src="imgs/ewm.jpg" width="100%" alt="" />
                    <p>扫描下载APP</p>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-main>
        <el-footer>
          <div
            style="background-image: url('imgs/wave.png'); height: 95px"
          ></div>
          <div
            style="
              text-align: center;
              background-color: #3f3f3f;
              color: #b1b1b1;
              padding: 30px 0;
            "
          >
            <p>
              Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3
              京公网安备 11010802029572号
            </p>
            <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          </div>
        </el-footer>
      </el-container>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {};
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key);
        },
      },
    });
  </script>
</html>
